<template>
    <!-- 粉丝列表-->
    <div class="content-fans">
        <div>
            <div>
                <el-divider content-position="left"><b>粉丝</b></el-divider>
            </div>
        </div>
        <el-card class="box-card" v-for="(item,index) in fansList.list" :key="index">
            <div class="box-card-img">
                <el-avatar :size="70">
                    <img :src="item.imgUrl | pictureUrl" />
                </el-avatar>
            </div>
            <div class="box-card-content">
                <div class="box-card-content-first">
                    <span><b>{{item.name}}</b> </span>
                    <span>{{item.role}}</span>
                    <span>{{item.school}}</span>
                    <el-button-group>
                        <el-select style="width: 150px;" size="mini" v-model="item.classifyId" @change="groupChange(item)" >
                            <el-option :label="item.name" :value="item.id" v-for="(item, index) in moveGroup(leftMenuCache)" :key="index"></el-option>
                        </el-select>
                        <!-- <el-button size="mini" icon="el-icon-rank" @click="groupMove(item)">移动分组</el-button> -->
                        <el-button size="mini" icon="el-icon-close" @click="handleFollow(item)" v-if="item.flag == 2">
                            取消关注</el-button>
                        <el-button size="mini" icon="el-icon-plus" @click="handleFollow(item)" v-if="item.flag == 1">关注
                        </el-button>
                        <el-button size="mini" icon="el-icon-error" @click="moveToblack(item)">加入黑名单</el-button>
                    </el-button-group>
                </div>
                <!-- <p>{{item.school}}</p> -->
                <p>
                    <span>关注 <i>{{item.beanNum > 0 ? item.beanNum : 0}}</i></span>
                    <el-divider direction="vertical"></el-divider>
                    <span>好友 <i>{{item.friend_count  > 0 ? item.friend_count : 0}}</i></span>
                    <el-divider direction="vertical"></el-divider>
                    <span>粉丝 <i>{{item.fans_count  > 0 ? item.fans_count : 0}}</i></span>
                    <!-- <el-divider direction="vertical"></el-divider> -->
                    <!-- <span>文章 <i>{{item.beanNum}}</i></span> -->
                    <!-- <el-divider direction="vertical"></el-divider> -->
                    <!-- <span>资源 <i>{{item.beanNum}}</i></span> -->
                </p>
            </div>
        </el-card>
        <div class="pageStyle">
            <!--分页-->
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[4, 10, 20, 50]" :page-size=pageSize
                layout="total, sizes, prev, pager, next, jumper" :total=total>
            </el-pagination>
        </div>
        <el-dialog title="新建分组" :visible.sync="addGroupV" width="30%" :show-close='false' center>
            <el-input type="text" placeholder="请输入新建分组名称" v-model="addGroupName" maxlength="20" minlength="2"
                show-word-limit>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="getRecommend('addGroupC')">取 消</el-button>
                <el-button type="primary" @click="getRecommend('addGroup')">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import {
        mapState
    } from "vuex";
    export default {
        computed: {
            ...mapState({
                user: state => state.userModule.user,
                addGroupFlag: state => state.commonModule.addGroupFlag,
                leftMenuCache: state => state.studentAnsweringModule.leftMenuCache,
            })
        },
        watch: {
            addGroupFlag(val, old) {
                this.getRecommend();
            },
            $route(val) {
                if (this.$route.query.routerKeyPath == 30000000) {
                    this.addGroupV = true
                } else {
                    this.addGroupV = false
                    this.getRecommend()
                }
            }
        },
        created() {
            this.getRecommend();
        },
        data() {
            return {
                addGroupV: false,
                addGroupName: '',
                fansList: {},
                value: "",
                currentPage: 1,
                pageSize: 4,
                total: 0
            }
        },
        methods: {
            groupChange(params){
                // console.log(params)
                this.groupMove(params)
            },
            // 移动分组下拉选择项
            moveGroup(params){
                return params.filter(item =>item.remark == this.$route.query.routerKeyPath[0])[0].children.filter(item =>
                item.id > 0 && (item.id !=10000000  && item.id !=20000000 && item.id !=30000000
                && item.name != '已分组' && item.name != '全部关注' && item.name != '全部粉丝' && item.name != '全部好友'))
            },
            // 移动分组
            groupMove(params){
                this.$store.dispatch('studentAnsweringModule/groupMove',{
                    classifyId: params.groupId || params.classifyId,
                    ids: params.id,
                    type: 3
                }).then(res =>{
                    if(res.data.code ==200){
                        this.$message.success("移动成功")
                        this.getConcernedTreeList()
                        this.getRecommend()
                    }else{
                        this.$message.warning(res.data.msg)
                    }
                })
            },
            getConcernedTreeList() {
                this.$store.dispatch('studentAnsweringModule/concernedTreeList')
            },
            moveToblack(params) {
                this.$store.dispatch('studentAnsweringModule/backlistjoin', {
                    id: params.id || params.concernedid,
                }).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("加入黑名单成功")
                        this.getRecommend()
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                })
            },
            handleFollow(followID, lenve) {
                if (followID.flag == 1 || lenve == "2") {
                    this.$store
                        .dispatch("studentAnsweringModule/addFollow", {
                            id: followID.userId || followID.concernedid,
                            lenve: lenve ? lenve : 1
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success(lenve ? "添加好友申请已成功发出" : "关注成功");
                                followID.flag = 2
                            }
                        });
                } else {
                    this.$store
                        .dispatch("studentAnsweringModule/beanremove", {
                            userId: followID.userId || followID.concernedid
                        })
                        .then(res => {
                            if (res.data.code == 200) {
                                this.$message.success("取消关注成功");
                                followID.flag = 1
                            }
                        });
                }
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getRecommend()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.getRecommend()
            },
            getRecommend(params) {
                var lenve = 3
                if (this.$route.query.routerKeyPath[1] == 30000000) {
                    this.addGroupV = true
                    if (params == 'addGroup') {
                        this.$store
                            .dispatch("studentAnsweringModule/concernSave", {
                                name: this.addGroupName,
                                parentid: this.$route.query.routerKeyPath[1].slice(0, 1)
                            })
                            .then(res => {
                                if (res.data.code == 200) {
                                    this.$store.commit('commonModule/CHANGE_FLUSHTREEFLAG')
                                    this.$message.success('添加成功')
                                    this.addGroupName = ''
                                    this.addGroupV = false
                                } else {
                                    this.$message.warning(res.data.msg)
                                }
                            })
                    } else if (params == 'addGroupC') {
                        this.addGroupV = false
                    }
                } else {
                    // console.log(this.$route.query)
                    this.$store.dispatch('studentAnsweringModule/concernedAllList', {
                        classifyId: this.$route.query.routerKeyPath[1],
                        concernedClassifyRemark: this.$route.query.routerKeyPath[1],
                        lenve: lenve, //-1:黑名单,1:关注 2:好友,3:粉丝，4:新增好友,5:推荐好友"
                        userId: null,
                        page: this.currentPage,
                        limit: this.pageSize
                    }).then(res => {
                        this.fansList = res.data.result;
                        this.total = res.data.result.total;
                    }).catch(_ => {
                        this.$message.error(res.data.msg);
                    });
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .content-fans {
        background: #fff;
        padding: 10px;
        width: 100%;
        min-height: 520px;
        margin-left: 10px;
        text-align: left;

        .box-card {
            margin: 0px 10px 10px 0px;
            width: 96%;

            .box-card-img {
                float: left;
                // margin-top: 10px;
            }

            .box-card-content {
                font-size: 14px;
                float: left;
                margin-left: 40px;
                line-height: 1.5em;
                width: 83%;

                .box-card-content-first {
                    span {
                        margin-right: 20px;
                    }

                    .el-button-group {
                        float: right;
                        position: relative;
                        top: 5px;
                        bottom: 10px;
                        left: 30px;
                    }
                }

                i {
                    color: #1e90ff;
                    cursor: pointer;
                }
            }
        }

    }

    .pageStyle {
        text-align: center;
        margin: 20px auto;
    }

    /deep/.el-card__body {
        padding: 10px 20px;
    }

    .box-card:hover {
        -webkit-box-shadow: #ccc 0px 10px 10px;
        -moz-box-shadow: #ccc 0px 10px 10px;
        box-shadow: #ccc 0px 10px 10px;
    }
</style>